<template>
  <div class="progress-milestone-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="milestone-show">
        <milestone-step :stepList="tableData"></milestone-step>
      </div>
      <div class="table-main">
        <div class="btns">
          <el-button v-if="hasTabAdd" type="primary" size="small" @click="handleAdd">新增里程碑</el-button>
        </div>
        <el-table
          class="table-container"
          :data="tableData"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          row-key="uuid">
          <el-table-column label="序号" type="index" width="120"></el-table-column>
          <el-table-column label="里程碑名称" prop="milepostName"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="计划节点时间" prop="planTime"></el-table-column>
          <el-table-column label="实际节点时间" prop="actualTime"></el-table-column>
          <el-table-column label="节点时间描述" prop="pointTimeDesc"></el-table-column>
          <el-table-column label="节点时间状态" prop="pointTimeFlag"></el-table-column>
          <el-table-column label="完成状态" prop="finishFlag">
            <template slot-scope="scope">
              {{ scope.row.finishFlag === '1' ? '完成' : '未完成' }}
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span v-if="hasTableEdit" class="btn" @click="handleEdit(scope.row)">编辑</span>
              <span v-if="hasTableDel" class="btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
    <add-milestone
      :visible="addVisible"
      :loading="addLoading"
      :formData="currentData"
      @submit="handleSetMilestone"
      @cancel="addVisible = false">
    </add-milestone>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import addMilestone from '@/components/project/progress/addMilestone';
import milestoneStep from '@/components/project/progress/milestoneStep';

export default {
  data() {
    return {
      breadcrumbData: [
        {
          name: '进度管理',
        },
        {
          name: '里程碑节点'
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      currentData: {},
      addType: 'add',
      addVisible: false,
      addLoading: false
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {
    this.getTableData();
  },
  components: {
    Breadcrumb,
    addMilestone,
    milestoneStep
  },
  methods: {
    async getTableData(options = {}) {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNo,
        projectId: this.projectId,
        ...options
      };
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getMilepostList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 新增里程碑
    handleAdd() {
      this.currentData = {};
      this.addType = 'add';
      this.addVisible = true;
    },
    // 编辑
    handleEdit(row) {
      this.currentData = { ...row };
      this.addType = 'edit';
      this.addVisible = true;
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteMilepost({
          ids: row.id
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    },
    // 保存设置
    async handleSetMilestone(data) {
      const params = {
        ...data,
        projectId: this.projectId
      };
      if (this.addType === 'edit') params.id = this.currentData.id;
      this.addLoading = true;
      const { success } = this.addType === 'add'
        ? await this.$Model.addMilepost(params)
        : await this.$Model.updateMilepost(params);
      this.addLoading = false;
      if (success) {
        this.$message.success('设置成功');
        this.getTableData();
        this.addVisible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';
  .progress-milestone-page {
    width: 100%;
    height: 100%;
    background-color: $mainBg;
    overflow: hidden;
    main {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .milestone-show {
        width: 100%;
        height: 33%;
        background: $baseBg;
        border-radius: 10px;
        padding: 0 20px;
      }
      .table-main {
        width: 100%;
        height: 66%;
        .btns {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 0 20px;
          margin-bottom: 10px;
        }
        .table-container {
          width: 100%;
          height: calc(100% - 90px);
          /deep/ .el-table__body-wrapper {
            height: calc(100% - 40px);
            padding-bottom: 46px;
            overflow-y: auto;
            .btn {
              padding: 0 5px;
              cursor: pointer;
              color: $mainColor;
            }
            .plan {
              cursor: pointer;
              padding: 4px 0;
              color: $mainColor;
            }
            .flag {
              position: relative;
              padding-left: 20px;
              .iconlichengbei {
                color: $successBtn;
                cursor: pointer;
                font-size: 12px;
                position: absolute;
                left: 0;
              }
            }
          }
        }
      }
    }
  }
</style>
